<template>
	<div class="endInvoice">
		<!-- 添加 -->
		<!-- <el-card class="box-card" shadow="hover">
      <el-row>
        <el-button type="primary" class="add-invoice" @click="addAgent">添加</el-button>
        <el-button type="info" class="add-invoice" @click="exportAll">导出</el-button>

      </el-row>
    </el-card>-->
		<orderStatistics :myInfo ='myInfo' :roleID='roleID'  @getData='changeData'/>
		<el-popover placement="left" trigger="click">


			<template>
				<el-checkbox v-model="checked" @change="selectAll">全选</el-checkbox>
				<br />
				<el-checkbox v-model="checked1">订单编号</el-checkbox>
				<br />
				<el-checkbox v-model="checked2">申请人</el-checkbox>
				<br />
				<!-- <el-checkbox v-model="checked13">流程人员</el-checkbox>
				<br /> -->
				<el-checkbox v-model="checked3">手机号码</el-checkbox>
				<br />
				<el-checkbox v-model="checked4">邮箱</el-checkbox>
				<br />
				<!-- <el-checkbox v-model="checked5">发票抬头</el-checkbox>
				<br />
				<el-checkbox v-model="checked6">发票税号</el-checkbox>
				<br /> -->
				<el-checkbox v-model="checked7">付款渠道</el-checkbox>
				<br />
				<el-checkbox v-model="checked8">发票编号</el-checkbox>
				<br />
				<el-checkbox v-model="checked9">开票金额</el-checkbox>
				<br />
				<el-checkbox v-model="checked20">缴费凭证</el-checkbox>
				<br />
				<el-checkbox v-model="checked17">退款凭证号</el-checkbox>
				<br />
				<el-checkbox v-model="checked14">银行卡号</el-checkbox>
				<br />
				<el-checkbox v-model="checked15">持卡人姓名</el-checkbox>
				<br />
				<el-checkbox v-model="checked16">银行卡支行</el-checkbox>
				<br />
				<el-checkbox v-model="checked18">寄件日期</el-checkbox>
				<br />
				<el-checkbox v-model="checked19">顺丰单号</el-checkbox>
				<br />
				<el-checkbox v-model="checked10">退款时间</el-checkbox>
				<br />
				<el-checkbox v-model="checked11">开票时间</el-checkbox>
				<br />
				<el-checkbox v-model="checked12">更新时间</el-checkbox>
			</template>
			<el-button style="float: right;margin-bottom: 5px;margin-top: 0;" slot="reference" icon="el-icon-arrow-down">显示字段</el-button>
		</el-popover>

		<!-- 列表查找 -->
		<span class="down-execel">
			<Poptip v-model="showFilter" placement="bottom-end">
				<i class="el-icon-search poptip-condition-add"></i>
				<a href="javascript:;">列表查找</a>
				<div slot="content">
					<Poptip v-model="showFilterCondition" placement="bottom-start" class='poptip-condition'>
						<i class="el-icon-plus poptip-condition-add"></i>
						<a href="javascript:;" class='poptip-condition-add'>添加过滤条件</a>

						<div slot="content" class="condition-list">
							<ul>
								<li v-for="(item, index) in columns" :key="index" class = 'poptip-condition-item' @click="addFilterCondition(item)">{{item.label}}</li>
							</ul>
						</div>
					</Poptip>
					<el-form :model="conditionForm"  ref="conditionForm" label-min-width="120px" class="demo-dynamic" @submit.native.prevent>
						<el-form-item
								v-for="(condition, index) in conditionForm.condition"
								:label="condition.label"
								:key="condition.key"
								:prop="'condition.' + index + '.value'"
								:rules="{
									required: true, message: condition.label +'不能为空', trigger: 'blur'
								}"
							>
							<el-date-picker
								v-model="refund_at"
								type="daterange"
								placeholder="选择日期"
								value-format="yyyy-MM-dd"
								:validate-event='false'
								@input = 'changInput'
								size="small"
								v-if='condition.label === "退款时间"'>
							</el-date-picker>

							<el-date-picker
								v-model="ticket_at"
								type="daterange"
								placeholder="选择日期"
								value-format="yyyy-MM-dd"
								:validate-event='false'
								@input = 'changInput'
								size="small"
								v-else-if='condition.label === "开票时间"'>
							</el-date-picker>
							<el-date-picker
								v-model="updated_at"
								type="daterange"
								placeholder="选择日期"
								value-format="yyyy-MM-dd"
								:validate-event='false'
								@input = 'changInput'
								size="small"
								v-else-if='condition.label === "更新时间"'>
							</el-date-picker>


							<el-select v-else-if='condition.label === "付款渠道"' v-model="condition.value" placeholder="请选择付款渠道" size="small">
								<el-option label="银行转账" value="银行转账"></el-option>
								<el-option label="微信" value="微信"></el-option>
								<el-option label="支付宝" value="支付宝"></el-option>
							</el-select>
							<el-select v-else-if='condition.label === "退款渠道"' v-model="condition.value" placeholder="请选择退款渠道" size="small">
								<el-option label="银行转账" value="银行转账"></el-option>
								<el-option label="微信" value="微信"></el-option>
								<el-option label="支付宝" value="支付宝"></el-option>
								<el-option label="原路退回" value="原路退回"></el-option>
							</el-select>
							<el-date-picker
                v-model="condition.value"
                type="daterange"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                @change = 'changInput'
                :validate-event='false'
                size="small"
                v-else-if='condition.label === "寄件日期"'>
              </el-date-picker>

							<el-input v-else size="small" v-model="condition.value" @keyup.enter.native="submitsearch('conditionForm')"></el-input>
							<el-button @click.stop="removeDomain(condition)" size="mini">删除</el-button>
						</el-form-item>
					</el-form>
					<div class= 'btns'>
						<el-button  @click="submitsearch('conditionForm')" size="mini">查询</el-button>
						<el-button   @click.stop="resetForm('conditionForm')" size="mini">重置</el-button>
					</div>
				</div>
			</Poptip>
		</span>

		<el-table
			id="IMTable"
			:data="tableData.slice(tableStart,tableEnd)"
			border
			v-loading="loading"
			ref="multipleTable"
			tooltip-effect="dark"
			height="88%"
			@sort-change='tableSortChange'
			@selection-change="handleSelectionChange">
			<el-table-column show-overflow-tooltip label="ID" min-width="60" align="left"><template slot-scope="scope" v-if='checked99'>{{scope.$index + 1}}</template></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked1" prop="order_number" label="订单编号" min-width="180" align="left" sortable='custom'>
				<template slot-scope='scope'>
					<span>
						{{ scope.row.final ? scope.row.final.order_number : scope.row.order_number }}
					</span>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked2" prop="liaisons" label="申请人" min-width="130" align="left" sortable>
				<template slot-scope="scope">
					<template v-if="scope.row.final">
						{{ scope.row.final.order ?  scope.row.final.order.liaisons : '' }}
					</template>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked3" prop="liaisons_tel" label="手机号码" min-width="150" align="left" sortable >
				<template slot-scope="scope">
					<template v-if="scope.row.final">
						{{ scope.row.final.order ?  scope.row.final.order.liaisons_tel : '' }}
					</template>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked4" prop="liaisons_email" label="邮箱" min-width="180" align="left" sortable >
				<template slot-scope="scope">
					<template v-if="scope.row.final">
						{{ scope.row.final.order ?  scope.row.final.order.liaisons_email : '' }}
					</template>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked7" prop="channel" label="付款渠道" min-width="120" align="left" sortable='custom'></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked8" prop="invoice_number" label="发票编号" min-width="180" align="left" sortable='custom' ></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked9" prop="money" label="开票金额(元)" min-width="140" align="left" sortable='custom'> </el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked14" prop="refund_info" label="退款渠道" min-width="120" align="left" sortable='custom'>
				<template slot-scope="scope">
					<span v-if="scope.row.refund_info == '原路退回'"> {{ scope.row.refund_info }} </span>
				</template>
			</el-table-column>
			<el-table-column
          label="缴费凭证"
          min-width="120"
          align="left"
          v-if="checked20"
          class-name="pay-status"
          sortable="custom"
          prop="consumer_pay_img"
        >
          <template slot-scope="scope">
            <div @click.stop style="height: 40px">
              <el-image
                v-if="scope.row.final && scope.row.final.consumer_pay_img_thumb != null"
                :src="scope.row.final.consumer_pay_img_thumb"
                :preview-src-list="[scope.row.final.consumer_pay_img]"
              ></el-image>
            </div>
          </template>
        </el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked17" prop="reimbursement" label="退款凭证号" min-width="180" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked14" prop="refund_info.card" label="银行卡号" min-width="180" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked15" prop="refund_info.name" label="持卡人姓名" min-width="140" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked16" prop="refund_info.bank" label="银行卡支行" min-width="150" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked18" prop="mailing_data" label="寄件日期" min-width="150" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked19" prop="odd_numbers" label="顺丰单号" min-width="150" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked10" prop="refund_at" label="退款时间" min-width="120" align="left" sortable='custom'></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked11" prop="ticket_at" label="开票时间" min-width="120" align="left" sortable='custom'></el-table-column>
			<el-table-column show-overflow-tooltip v-if="checked12" prop="updated_at" label="更新时间" min-width="180" align="left" sortable='custom'></el-table-column>
			<el-table-column v-if="this.$store.state.user.role_id == 1 && checked99" fixed="right" align="center" width="80">
				<template slot="header">
					<span class="tableLastCol1">操作</span>
				</template>
				<template slot-scope="scope">
					<el-button type="danger" size="small" @click="delInvoice(scope.row)" v-no-more-click:3000>删除</el-button>
				</template>
			</el-table-column>
			<el-table-column v-if="this.$store.state.user.role_id == 4" fixed="right" align="center" width="120">
				<template slot="header">
					<span class="tableLastCol">操作</span>
				</template>
				<template slot-scope="scope">
					<el-button v-no-more-click:3000 @click="supplementInfo(scope.row)" type='primary' size="small">补充信息</el-button>
				</template>
			</el-table-column>
		</el-table>


		<!-- 分页 -->
		<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="pageSizes" :page-size="Number(pageSize)" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

		<!-- 补充信息 -->
		<supplementInfoDialog ref="supplementInfoDialog" @refresh='search'></supplementInfoDialog>
	</div>
</template>
<script>
	import {
		getInvoiceList,
		delInvoice
	} from "~/api/invoice";
	import orderStatistics from "~/components/orderStatistics"
	import { getMyInfo } from "~/api/user"
	import supplementInfoDialog from './components/supplementInfo'
	export default {
		head: {
			title: "已开票列表"
		},
		components:{
			orderStatistics,
			supplementInfoDialog
		},
		name: "endInvoice",
		data() {
			return {
				roleID: '',
				myInfo: {},
				checked99: true,
				checked:true,
				checked1:true,
				checked2:true,
				checked3:true,
				checked4:true,
				checked5:true,
				checked6:true,
				checked7:true,
				checked8:true,
				checked9:true,
				checked10:true,
				checked11:true,
				checked12:true,
				checked13:true,
				checked14:true,
				checked15:true,
				checked16:true,
				checked17: true,
				checked18: true,
				checked19: true,
				checked20: true,
				tableData: [],
				checkTable: [],
				tableSize: 10, //一页几条
				tableStart: 0, //table数组过滤的第一条索引
				tableEnd: 10, //table数组过滤的最后一条索引
				currentPage: 1, //目前在第几页
				pageSizes: [25, 50], //一页可以几条
				pageSize: 25, //一页可以几条
				total: 0,
				showFilter: false, // 控制显示筛选条件
				showFilterCondition: false,
				baseUrl: global.baseurl,
				conditionForm: {
					condition: []
				}, //筛选条件
				columns: [
					{
						label: '订单编号',
						id: 1,
						parameter: 'order_number'
					},
					{
						label: '申请人',
						id: 2,
						parameter: 'liaisons'
					},
					{
						label: '手机号码',
						id: 3,
						parameter: 'liaisons_tel'
					},
					{
						label: '邮箱',
						id: 4,
						parameter: 'liaisons_email'
					},
					{
						label: '付款渠道',
						id: 5,
						parameter: 'channel'
					},
					{
						label: '发票编号',
						id: 6,
						parameter: 'invoice_number'
					},
					{
						label: '开票金额',
						id: 7,
						parameter: 'money'
					},
					{
						label: '退款渠道',
						id: 8,
						parameter: 'refund_info'
					},
					{
						label: '退款凭证号',
						id: 16,
						parameter: 'reimbursement'
					},
					{
						label: '银行卡号',
						id: 9,
						parameter: 'card'
					},
					{
						label: '持卡人姓名',
						id: 10,
						parameter: 'name'
					},
					{
						label: '银行卡支行',
						id: 11,
						parameter: 'bank'
					},
					{
						label: '顺丰单号',
						id: 17,
						parameter: 'odd_numbers',
					},
					{
						label: '寄件日期',
						id: 18,
						parameter: 'mailing_data'
					},
					{
						label: '退款时间',
						id: 12,
						parameter: 'refund_at'
					},
					{
						label: '开票时间',
						id: 13,
						parameter: 'ticket_at'
					},
					{
						label: '更新时间',
						id: 14,
						parameter: 'updated_at'
					},
				],

				lastTime: 0,
				searchValue: '',
				refund_at: [],
				ticket_at: [],
				updated_at: [],
				formProcess: {},
				paramsByInv: {
					status: "开票成功",
				},
				isRefundInfo: true,
			};
		},
		async asyncData({
			$axios
			}) {
			let res = await getInvoiceList($axios, {
				status: "开票成功",
			});
			let obj = {
				loading: false
			};
			if (res.data.code == 200) {
				obj.total = res.data.page.total;
				obj.tableData = res.data.data;
				for(let i in obj.tableData){
					if( obj.tableData[i].refund_info == '原路退回' ) {

					} else {
						obj.tableData[i].refund_info = JSON.parse(obj.tableData[i].refund_info)
					}

				}
				obj.pageSize = res.data.page.per_page;
				obj.tableSize = res.data.page.per_page;
				obj.tableEnd = res.data.page.per_page;
				obj.total = res.data.page.total;
			}
			return obj;
		},
		created () {
			this.getMyinfo()
		},

		computed: {
			checkedArr() {
				let arr = [this.checked1, this.checked2, this.checked3, this.checked4, this.checked5, this.checked6, this.checked7, this.checked8, this.checked9, this.checked10, this.checked11, this.checked12, this.checked13, this.checked14, this.checked15, this.checked16, this.checked17, this.checked18, this.checked19, this.checked20]
				return arr
			},
		},

		methods: {
			supplementInfo(row) {
				this.$refs['supplementInfoDialog'].show(row)
			},
			selectAll(val) {
				if (val) {
					this.checked1 = true;
					this.checked2 = true;
					this.checked3 = true;
					this.checked4 = true;
					this.checked5 = true;
					this.checked6 = true;
					this.checked7 = true;
					this.checked8 = true;
					this.checked9 = true;
					this.checked10 = true;
					this.checked11 = true;
					this.checked12 = true;
					this.checked13 = true;
					this.checked14 = true;
					this.checked15 = true;
					this.checked16 = true;
					this.checked17 = true;
					this.checked18 = true;
					this.checked19 = true;
					this.checked20 = true;
				} else {
					this.checked1 = false;
					this.checked2 = false;
					this.checked3 = false;
					this.checked4 = false;
					this.checked5 = false;
					this.checked6 = false;
					this.checked7 = false;
					this.checked8 = false;
					this.checked9 = false;
					this.checked10 = false;
					this.checked11 = false;
					this.checked12 = false;
					this.checked13 = false;
					this.checked14 = false;
					this.checked15 = false;
					this.checked16 = false;
					this.checked17 = false;
					this.checked18 = false;
					this.checked19 = false;
					this.checked20 = false;
				}
			},
			// 删除
			delInvoice(val) {
				this.$confirm("是否删除已开票信息?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						center: true,
						type: "warning"
					})
					.then(() => {
						delInvoice(this.$axios, val.id)
							.then(res => {
								if (res.data.code == 200) {
									this.$message({
										message: "删除成功",
										type: "success"
									});
									//刷新数据
									// this.changeData();
									this.search()
								} else {
									this.$message({
										message: res.data.message,
										type: "error"
									});
								}
							})
							.catch(err => {
								this.$message({
									message: err,
									type: "error"
								});
							});
					})
					.catch(err => {
						this.$message({
							type: "info",
							message: err
						});
					});
			},
			async getMyinfo (params) {
				let myInfo = await getMyInfo(this.$axios, params);
				if (myInfo.data.status == 'success') {
					this.$store.commit("setRoleInfo",myInfo.data.data)
					this.$store.commit("setUser",myInfo.data.data)
					this.myInfo = myInfo.data.data
					this.roleID = this.myInfo.role_id
				}
			},
			//退款
			refundInvoice(row) {
				this.$confirm("是否退款?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						center: true,
						type: "warning"
					})
					.then(() => {
						this.$axios.put('/api/invoice/'+row.id+'/confirm/refund')
						.then((res) => {
							if(res.data.code == 200){
								this.$message({
									type: "success",
									message: '提交退款成功'
								});
								this.search()
								row.refund=''
							}else{
								this.$message({
									message: res.data.message,
									type: "error"
								});
							}
						})
					})
					.catch(action => {})
			},

			//刷新数据
			onChangeList() {
				this.changeData();
			},
			//获取新数据
			changeData(params) {
				if (params) {
					this.paramsByInv = {
						status: '开票成功'
					}
					this.paramsByInv.refund = params.refund
					this.paramsByInv.process_id = params.process_id
				}

				getInvoiceList(this.$axios, this.paramsByInv)
					.then(res => {
						this.tableData.splice(0, this.tableData.length, ...res.data.data);
						for(let i in this.tableData){
							if (this.tableData[i].refund_info != '原路退回') {
								this.tableData[i].refund_info = JSON.parse(this.tableData[i].refund_info)
							}
						}
						this.pageSize = res.data.page.per_page;
						this.tableSize = res.data.page.per_page;
						this.tableEnd = res.data.page.per_page;
						this.total = res.data.page.total;
					})
					.catch(err => {
						console.log(err);
					});
			},

			// 多选
			handleSelectionChange(val) {
				this.checkTable = val;
			},
			//批量导出
			exportAll() {},

			//选择一页几条
			handleSizeChange(size) {
				this.paramsByInv.perPage = size
				this.paramsByInv.page = 1
				getInvoiceList(this.$axios, this.paramsByInv)
				.then(res => {
					if (res.data.code == 200) {
						this.tableData = res.data.data
						this.pageSize = res.data.page.per_page;
						this.tableSize = res.data.page.per_page;
						this.tableEnd = res.data.page.per_page;
						this.total = res.data.page.total;
						this.currentPage =  res.data.page.currentPage
						for(let i in this.tableData){
							if (this.tableData[i].refund_info != '原路退回') {
								this.tableData[i].refund_info = JSON.parse(this.tableData[i].refund_info)
							}
						}
					}
				})
			},
			//选择第几页
			handleCurrentChange(currentPage) {
				let params = this.paramsByInv
				params.page = currentPage
				getInvoiceList(this.$axios, params)
				.then(res => {
					if (res.data.code == 200) {
						this.tableData = res.data.data
						this.pageSize = res.data.page.per_page;
						this.tableSize = res.data.page.per_page;
						this.tableEnd = res.data.page.per_page;
						this.total = res.data.page.total;
						this.currentPage =  res.data.page.currentPage
						for(let i in this.tableData){
							if (this.tableData[i].refund_info != '原路退回') {
								this.tableData[i].refund_info = JSON.parse(this.tableData[i].refund_info)
							}
						}
					}
				})
			},
			// 添加条件筛选
			addFilterCondition(item) {
				let filterItem = {
					value: '',
					label: item.label,
					parameter: item.parameter,
					key: Date.now()
				}
				if (this.conditionForm.condition.length > 0) {
        let conditionlabels = []
        for(let i = 0; i < this.conditionForm.condition.length; i++) {
          conditionlabels.push(this.conditionForm.condition[i].label)
        }
					let Check = conditionlabels.indexOf(item.label)
					Check == -1 ? this.conditionForm.condition.push(filterItem) : this.$message.error('请勿重复添加')
				} else {
					this.conditionForm.condition.push(filterItem)
				}

      	this.showFilterCondition = false;

			},

			resetForm(formName) {
				this.showFilter = true
				this.$refs[formName].resetFields()
				this.$refs['multipleTable'].clearSort()
				this.conditionForm.condition.forEach(v => {
					if (v.value) {
						v.value = null
					}
				});
				this.showFilterCondition = false
				this.refund_at = []
				this.ticket_at = []
				this.updated_at = []
				this.paramsByInv = {
					status: "开票成功",
				}
				this.$nextTick(() => {
					this.$refs[formName].clearValidate()
				})
				// this.changeData()
				// this.currentPage = 1
				// this.showFilter = false

      },
			removeDomain(item) {
				this.showFilter = true
				delete this.paramsByInv[item.parameter]
				let index = this.conditionForm.condition.indexOf(item)
				if (index !== -1) {
				this.conditionForm.condition.splice(index, 1)
						}
						if (item.label === '退款时间') {
							this.refund_at = []
							delete this.paramsByInv.refund_start_time
							delete this.paramsByInv.refund_end_time
				}
						if (item.label === '开票时间') {
							this.ticket_at = []
							delete this.paramsByInv.ticket_start_time
							delete this.paramsByInv.ticket_end_time
				}
						if (item.label === '更新时间') {
							this.updated_at = []
							delete this.paramsByInv.updated_start_time
							delete this.paramsByInv.updated_end_time
				}
				this.search()
			},
			search() {
				for (var i = 0; i < this.conditionForm.condition.length; i++) {
					let a = this.conditionForm.condition[i].parameter
					if (this.conditionForm.condition[i].parameter === 'refund_at') {
						this.paramsByInv.refund_start_time = this.refund_at[0]
						this.paramsByInv.refund_end_time = this.refund_at[1]
					}
					if (this.conditionForm.condition[i].parameter === 'ticket_at') {
						this.paramsByInv.ticket_start_time = this.ticket_at[0]
						this.paramsByInv.ticket_end_time = this.ticket_at[1]
					}
					if (this.conditionForm.condition[i].parameter === 'updated_at') {
						this.paramsByInv.updated_start_time = this.updated_at[0]
						this.paramsByInv.updated_end_time = this.updated_at[1]
					}
					this.paramsByInv[a] = this.conditionForm.condition[i].value
				}

					// 处理分页数据
				delete this.paramsByInv.page

				// 处理排序状态
				delete this.paramsByInv.sort_str
				delete this.paramsByInv.sort_order
				this.$refs['multipleTable'].clearSort()

				getInvoiceList(this.$axios, this.paramsByInv)
					.then(res => {
						if (res.data.code == 200) {
							this.tableData.splice(0, this.tableData.length, ...res.data.data)
							for(let i in this.tableData){
								if (this.tableData[i].refund_info != '原路退回') {
									this.tableData[i].refund_info = JSON.parse(this.tableData[i].refund_info)
								}

							}
							this.pageSize = res.data.page.per_page;
							this.tableSize = res.data.page.per_page;
							this.tableEnd = res.data.page.per_page;
							this.total = res.data.page.total;
							this.currentPage =  res.data.page.currentPage
							this.getMyinfo()
						}

					})
					.catch(err => {
						console.log(err);
				})

				// this.tableData = data.tableData

			},
			submitsearch(formName) {
				let that = this
        this.$refs[formName].validate((valid, prop) => {
				// this.$refs[formName].clearValidate();
					let props = []
					for (let k in prop) {
						props.push(prop[k][0].field)
						if (prop[k][0].message = '退款时间不能为空') {
							if (that.refund_at) {
								if(	that.refund_at.length > 0	) {
									that.$refs[formName].clearValidate([prop[k][0].field])
									// that.search()
									let timeIndex = props.indexOf('退款时间不能为空')
									props.splice(timeIndex, 1)
								}
							} else {
								return false
							}

						}
						if (prop[k][0].message = '开票时间不能为空') {
							if (that.ticket_at) {
									if(	that.ticket_at.length > 0	) {
									that.$refs[formName].clearValidate([prop[k][0].field])
									// that.search()
									let timeIndex = props.indexOf('开票时间不能为空')
									props.splice(timeIndex, 1)
								}
							} else return false

						}
						if (prop[k][0].message = '更新时间不能为空') {
							if (that.updated_at) {
									if(	that.updated_at.length > 0	) {
									that.$refs[formName].clearValidate([prop[k][0].field])
									// that.search()
									let timeIndex = props.indexOf('更新时间不能为空')
									props.splice(timeIndex, 1)
								}
							} else return false

						}
					}

					if (props.length) {
						that.$refs[formName].validateField(props, (valid2) => {
							if(valid2) {
								return false;
							} else {
								that.search()
								this.showFilter = false
							}
						})
					} else {
						this.showFilter = false
						that.search()
					}
     	 	})
			},
			changInput () {
				this.$refs['conditionForm'].clearValidate();
			},
			getAllAgent() {
				this.$axios.get('api/user/process')
					.then(res => {
						if (res.data.code == 200) {
							let arr = res.data.data;
							for (let key in arr) {
								//element的模糊匹配组件el-autocomplete指定：必须数组的每个元素是个对象，并且有value属性
								arr[key].value = arr[key].name;
							}
							this.restaurants2 = arr;
						}
					})
					.catch(err => {
						this.$message({
							type: "err",
							message: err
						});
				});

			},
			// 表格排序
			tableSortChange(column) {
				if (column.order === 'descending') {
					this.paramsByInv.sort_str = column.prop
					this.paramsByInv.sort_order = 'desc'
				} else if (column.order === 'ascending') {
					this.paramsByInv.sort_str = column.prop
					this.paramsByInv.sort_order = 'asc'
				} else {
					delete this.paramsByInv.sort_str
					delete this.paramsByInv.sort_order
				}
				if (
					column.prop == 'refund_info.card' ||
					column.prop == 'refund_info.name' ||
					column.prop == 'refund_info.bank' ||
					column.prop == 'final.order.process.name'
				) {
				return
				}
				this.loading = true;
				getInvoiceList(this.$axios, this.paramsByInv)
					.then(res => {
						this.loading = false;
						this.tableData.splice(0, this.tableData.length, ...res.data.data)
						for(let i in this.tableData){
							if (this.tableData[i].refund_info != '原路退回') {
								this.tableData[i].refund_info = JSON.parse(this.tableData[i].refund_info)
							}
						}
						this.pageSize = res.data.page.per_page;
						this.tableSize = res.data.page.per_page;
						this.tableEnd = res.data.page.per_page;
						this.total = res.data.page.total;
						this.currentPage =  res.data.page.currentPage
						this.showFilter = false
					})
					.catch(err => {
						console.log(err);
				})
			},

		},

		beforeUpdate() {
			this.$nextTick(() => {
				this.$refs.multipleTable.doLayout();
			});
		},
		watch: {
			checkedArr: {
				handler: function(val) {
					if (val.some(v => v == false)) {
					this.checked = false
					} else {
					this.checked = true
					}
					if (val.every(v => v == false)) {
						this.checked99 = false
					} else {
						this.checked99 = true
					}
				},
				deep: true
			},
			tableData: {
				handler: function(val) {
					val.forEach(v => {
						if (v.final && v.final.consumer_pay_img) {
							v.final.consumer_pay_img =
								this.baseUrl + "/storage/upload/" + v.final.consumer_pay_img;
						}
						if (v.final && v.final.consumer_pay_img_thumb) {
							v.final.consumer_pay_img_thumb =
								this.baseUrl + "/storage/upload/" + v.final.consumer_pay_img_thumb;
						}
					});
				},
				immediate: true,
				deep: true
			},
		},
	};
</script>
<style lang="less" scoped>
	.endInvoice {
		height: 100%; //撑满表格
    .el-table {
      width: 99.9% !important;
    }
	}
	.el-card {
		margin-bottom: 10px;
	}

	.el-main .ivu-poptip .ivu-poptip-popper .ivu-poptip-content .ivu-poptip-inner{
		min-width: 480px ;
		// height: 300px;
		overflow-y:scroll;

	}

	.poptip-condition {
		display: block;
		margin-top: 10px;
		.poptip-condition-item {
			line-height: 25px;
			cursor:pointer;
		}
		.poptip-condition-add {
			font-size: 14px;
		}
	}
	.demo-dynamic {
		padding-left: 10px;
		.el-form-item {
			margin-bottom: 12px;
		}
		.el-input {
			width: 240px;
		}
		.el-date-editor {
			width: 240px;
		}
		.el-button {
			padding: 9px 15px;
			vertical-align: baseline;
		}
		.el-form-item__error {
			padding-top: 0 ;
		}

	}
	.btns {
		margin-top: 10px;
	}
	.el-main .poptip-condition .ivu-poptip-popper .ivu-poptip-content .ivu-poptip-inner {
		min-width: 180px;
	}
	.tableLastCol {
    padding-right: 10px ;
	}
	.tableLastCol1 {
		padding-right: 14px ;
	}
	.down-execel {
		display: block;
		height: 40px;
		line-height: 40px;
		color: #333333;
		font-size: 14px;
		margin-right: 20px;
		float: right;
	}
</style>
